<template>
  <div>
    <div class="time-line-container">
      <a-spin tip="走在时间的前面" :spinning="timelineLoading">
        <a-timeline>
          <div v-for="(item,index) in timeLine" :key="index" class="timeline">
            <transition name="time-line" appear>
              <div class="month">
                {{ item.month }}
              </div>
            </transition>
            <transition v-for="ite in item.list" :key="ite.blogId" name="time-line" appear>
              <a-timeline-item color="green">
                <router-link :to="'/info/'+ite.blogId">
                  {{ ite.createdTime }} -- {{ ite.blogTitle }} <span style="margin-left: 15px"><a-icon type="paper-clip" />发布人:{{ ite.nickname }}</span>
                </router-link>
                <a-divider :dashed="true" />
              </a-timeline-item>
            </transition>
          </div>
        </a-timeline>
      </a-spin>
    </div>
  </div>
</template>

<script>
import blogApi from '@/api/blog'
export default {
  name: 'Index',
  data() {
    return {
      timeLine: [],
      timelineLoading: true
    }
  },
  created() {
    this.getTimeLine()
  },
  methods: {
    getTimeLine() {
      this.timelineLoading = true
      blogApi.getTimeLine().then(res => {
        if (res.code === 200) {
          this.timeLine = res.data
          this.timelineLoading = false
        } else {
          this.timelineLoading = false
        }
      }).catch(() => {
        this.timelineLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .month{
    font-weight: bold;
    color: #a2a2a2;
    margin: 15px 0;
    font-size: 20px;
  }
  .ant-divider-horizontal{
    margin: 16px 0 !important;
  }
.time-line-container{
  background-color: #ffffff;
  padding: 45px;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.time-line-enter-active{
  transition: all .9s ease;
}
/* .menu-leave-active for below version 2.1.8 */
.time-line-enter{
  transform: translateX(-70px);
  opacity: 0;
}
.times-line-enter-active{
  transition: all .9s ease;
}
/* .menu-leave-active for below version 2.1.8 */
.times-line-enter{
  transform: rotate(40deg);
  opacity: 0;
}
</style>
